@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <!-- 返回首页按钮 -->
            <div class="mb-3">
                <a href="{{ route('home') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> 返回首页
                </a>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <span>订单列表</span>
                    </div>
                </div>

                <div class="card-body">
                    <!-- 搜索和筛选表单 -->
                    <form method="GET" action="{{ route('orders.index') }}" class="mb-4">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="search">订单号/收货人:</label>
                                    <input type="text" class="form-control" id="search" name="search" 
                                           value="{{ request('search') }}" placeholder="输入订单号或收货人姓名">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="status">订单状态:</label>
                                    <select class="form-control" id="status" name="status">
                                        <option value="">全部状态</option>
                                        <option value="未支付" {{ (request('status', '已支付') == '未支付') ? 'selected' : '' }}>未支付</option>
                                        <option value="已支付" {{ (request('status', '已支付') == '已支付') ? 'selected' : '' }}>已支付</option>
                                        <option value="已发货" {{ (request('status', '已支付') == '已发货') ? 'selected' : '' }}>已发货</option>
                                        <option value="已完成" {{ (request('status', '已支付') == '已完成') ? 'selected' : '' }}>已完成</option>
                                        <option value="已取消" {{ (request('status', '已支付') == '已取消') ? 'selected' : '' }}>已取消</option>
                                        <option value="已退款" {{ (request('status', '已支付') == '已退款') ? 'selected' : '' }}>已退款</option>
                                        <option value="已处理" {{ (request('status', '已支付') == '已处理') ? 'selected' : '' }}>已处理</option>
                                        <option value="已签收" {{ (request('status', '已支付') == '已签收') ? 'selected' : '' }}>已签收</option>
                                        <option value="申请退货" {{ (request('status', '已支付') == '申请退货') ? 'selected' : '' }}>申请退货</option>
                                        <option value="退货已发出" {{ (request('status', '已支付') == '退货已发出') ? 'selected' : '' }}>退货已发出</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group" style="margin-top: 32px;">
                                    <button type="submit" class="btn btn-primary">搜索</button>
                                    <a href="{{ route('orders.index') }}" class="btn btn-secondary">重置</a>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>订单号</th>
                                    <th>收货人</th>
                                    <th>联系电话</th>
                                    <th>收货地址</th>
                                    <th>订单金额</th>
                                    <th>订单状态</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($orders as $order)
                                <tr>
                                    <td>{{ $order->order_number }}</td>
                                    <td>{{ $order->receiver_name }}</td>
                                    <td>{{ $order->receiver_phone }}</td>
                                    <td>{{ $order->shipping_address }}</td>
                                    <td>¥{{ number_format($order->total_price, 2) }}</td>
                                    <td>
                                        @switch($order->status)
                                            @case('未支付')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #ffc107; color: #212529;">未支付</span>
                                                @break
                                            @case('已支付')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #17a2b8; color: #fff;">已支付</span>
                                                @break
                                            @case('已处理')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #007bff; color: #fff;">已处理</span>
                                                @break
                                            @case('已发货')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #28a745; color: #fff;">已发货</span>
                                                @break
                                            @case('已签收')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #20c997; color: #fff;">已签收</span>
                                                @break
                                            @case('已完成')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #28a745; color: #fff;">已完成</span>
                                                @break
                                            @case('申请退货')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #fd7e14; color: #fff;">申请退货</span>
                                                @break
                                            @case('退货已发出')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #e0a800; color: #212529;">退货已发出</span>
                                                @break
                                            @case('已取消')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #dc3545; color: #fff;">已取消</span>
                                                @break
                                            @case('已退款')
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #6c757d; color: #fff;">已退款</span>
                                                @break
                                            @default
                                                <span class="badge badge-pill" style="font-size: 0.85em; background-color: #6c757d; color: #fff;">未知状态</span>
                                        @endswitch
                                    </td>
                                    <td>{{ $order->created_at->format('Y-m-d H:i:s') }}</td>
                                    <td>
                                        <a href="{{ route('orders.show', $order->id) }}"
                                            class="btn btn-sm btn-info">查看</a>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">暂无订单数据</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    @if($orders->hasPages())
                    <div class="mt-4">
                        <nav aria-label="订单分页导航">
                            <ul class="pagination justify-content-center">
                                {{-- 上一页链接 --}}
                                @if ($orders->onFirstPage())
                                    <li class="page-item disabled">
                                        <span class="page-link">上一页</span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $orders->previousPageUrl() }}">上一页</a>
                                    </li>
                                @endif

                                {{-- 页码链接 --}}
                                @foreach ($orders->getUrlRange(1, $orders->lastPage()) as $page => $url)
                                    @if ($page == $orders->currentPage())
                                        <li class="page-item active">
                                            <span class="page-link">{{ $page }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                {{-- 下一页链接 --}}
                                @if ($orders->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $orders->nextPageUrl() }}">下一页</a>
                                    </li>
                                @else
                                    <li class="page-item disabled">
                                        <span class="page-link">下一页</span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection